.dark {
  background-color: #282c34 !important;
  transition: all linear .6s;

  div {
    color: #f2f2f2;
  }

  a {
    color: #f2f2f2;
  }

  .copyright {
    background-color: #3f4347 !important;
  }

  .topicContainer,
  .showCommentArea,
  .personalContainer,
  .replyMe,
  .replyBox,
  .Detailbox,
  .loadedContent,
  .centerArea,
  .weiboContent,
  .wirteArea,
  .header,
  .center,
  .replyContent,
  .settingContainer,
  .UserCardright,
  .tools,
  .ReplyContent,
  textarea {
    background-color: #3f4347 !important;
    transition: all linear .6s;
  }

  .centerArea {
    background-color: transparent !important;
  }

  .boxContainer {
    background: none !important;
  }

  .el-menu {
    background-color: #373d43 !important;
    // transition: all linear .6s;

    li {
      color: #f2f2f2;
      transition: all linear .6s;

      &:hover {
        background-color: #26292f !important;
      }
    }
  }

  .content {

    .el-dialog__body,
    .el-dialog__header,
    .el-dialog__footer {
      background-color: #282c34;
    }

    .el-dialog__header {
      padding: 0;
    }
  }

  h4 {
    background-color: #393c41 !important;

    .el-button {
      background-color: #393c41;
    }
  }

  .collapse {
    color: #f2f2f2 !important;
  }

  .el-overlay-dialog {
    background-color: rgba(0, 0, 0, 0.3) !important;
  }

  .loadedContent {
    border: 1px solid rgb(137, 137, 137);
  }



  .centerItem {
    &:hover {
      color: #ff5900 !important;
    }
  }

  .replyMe {
    border: 1px solid #ccc;

    .replyBox,
    .Detailbox {
      &:hover {
        background-color: #393c41 !important;
        // transition: none;

        .content {
          background-color: #393c41 !important;
          transition: none;
        }
      }
    }
  }

  .el-upload {
    background-color: #393c41;
  }

  .Card {
    background-color: #37393d !important;
    border: 1px solid #ccc;
  }

  .is-active {
    color: #ff8200 !important;
  }
}